<template>
  <div class="all">
    <el-transfer v-model="value" :data="data" :titles="['可疑IP', '危险IP']" id="main"></el-transfer>
    <div class="buttons">
      <div class="apply-button">
        <el-button type="success" @click="submitip" round>应用</el-button>
      </div>
      <div class="refresh-button">
        <el-button type="success" @click="refreshbanip" round>刷新</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'iplist',
  data() {
    // const generateData = () => {
    //   const data = [{
    //     key: 0,
    //     label: "172.17.0.3"
    //   }];
    //   for (let i = 1; i <= 15; i++) {
    //     data.push({
    //       key: i,
    //       label: Math.floor(Math.random() * 256).toString() + '.'
    //       + Math.floor(Math.random() * 256).toString() + '.'
    //       + Math.floor(Math.random() * 256).toString() + '.'
    //       + Math.floor(Math.random() * 256).toString()
    //     });
    //   }
    //   return data;
    // };
    return {
      data: [],
      value: []
    };
  },
  props: [
      "docker",
      "host"
  ],
  methods: {
    refreshbanip: function () {
      var that = this;
      axios.get("http://127.0.0.1:5000/getbanip").then(
          function (res) {
            that.data = [];
            that.value = [];
            var doubtlist = res.data["doubt"]
            var dangerlist = res.data["danger"]
            // console.log(doubtlist)
            // console.log(dangerlist)
            for (let i = 0; i < doubtlist.length; i++) {
              that.data.push({
                key: i,
                label:doubtlist[i]
              })
            }
            var len = that.data.length
            for (let i = 0; i < dangerlist.length; i++) {
              that.data.push({
                key: len + i,
                label: dangerlist[i]
              })
              that.value.push(len + i);
            }
          }
      )
    },
    submitip: function () {
      var data = JSON.stringify({
        "data": this.data,
        "value":this.value
      })
      console.log(data)
      axios({
        url: 'http://127.0.0.1:5000/setbanip',
        method: 'post',
        data: data,
        headers: {
          'Content-Type': 'application/json'
        }
      })
    }
  },
  mounted() {
    this.refreshbanip()
    this.timer = window.setInterval(() => {
      setTimeout(() => {
        this.refreshbanip()
      }, 0)
    }, 30000)
  },
  // host() {
  //   this.fake()
  // }

};
</script>

<style scoped>
.buttons {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}
.apply-button {
  margin-left: 27%;


}
.refresh-button {
  margin-left: 5%;
}
.el-button--success {
  background-color: #3a86c2;
  border-color: #3a3dc2;
}
</style>